<template>
  <el-row
    :gutter="20"
  >
    <el-col
      :xs="12"
      :sm="12"
      :md="8"
      :lg="8"
      :xl="6"
      class="card"
    >
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>访问量</span>
            <el-tag
              size="medium"
              type="success"
            >
              日
            </el-tag>
          </div>
        </template>
        <div class="card-main">
          <div class="py-1 px-1 ">
            <span class="text-3xl">2,021</span>
          </div>
          <div class="py-1 px-1 flex justify-between">
            <div class="text-sn">
              日同比 2,021%
            </div>
            <div class="text-sn">
              周同比 2,021%
            </div>
          </div>
        </div>
        <div class="py-1 px-1 flex justify-between card-footer">
          <div class="text-sn">
            总访问量：
          </div>
          <div class="text-sn">
            2,021
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col
      :xs="12"
      :sm="12"
      :md="8"
      :lg="8"
      :xl="6"
      class="card"
    >
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>销售额</span>
            <el-tag size="medium">
              周
            </el-tag>
          </div>
        </template>
        <div class="card-main">
          <div class="py-1 px-1 ">
            <span class="text-3xl">￥2,021</span>
          </div>
          <div class="py-1 px-1 flex justify-between">
            <div class="text-sn">
              日同比 2,021%
            </div>
            <div class="text-sn">
              周同比 2,021%
            </div>
          </div>
        </div>
        <div class="py-1 px-1 flex justify-between card-footer">
          <div class="text-sn">
            总访问量：
          </div>
          <div class="text-sn">
            2,021
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col
      :xs="12"
      :sm="12"
      :md="8"
      :lg="8"
      :xl="6"
      class="card"
    >
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>订单量</span>
            <el-tag
              size="medium"
              type="warning"
            >
              周
            </el-tag>
          </div>
        </template>
        <div class="card-main">
          <div class="py-1 px-1 ">
            <span class="text-3xl">2,021</span>
          </div>
          <div class="py-1 px-1 flex justify-between">
            <div class="text-sn">
              日同比 2,021%
            </div>
            <div class="text-sn">
              周同比 2,021%
            </div>
          </div>
        </div>
        <div class="py-1 px-1 flex justify-between card-footer">
          <div class="text-sn">
            转化率：
          </div>
          <div class="text-sn">
            2,021%
          </div>
        </div>
      </el-card>
    </el-col>
    <el-col
      :xs="12"
      :sm="12"
      :md="8"
      :lg="8"
      :xl="6"
      class="card"
    >
      <el-card shadow="hover">
        <template #header>
          <div class="card-header">
            <span>成交额</span>
            <el-tag
              type="error"
              size="medium"
            >
              月
            </el-tag>
          </div>
        </template>
        <div class="card-main">
          <div class="py-1 px-1 ">
            <span class="text-3xl">￥2,021</span>
          </div>
          <div class="py-1 px-1 flex justify-between">
            <div class="text-sn">
              日同比 2,021%
            </div>
            <div class="text-sn">
              周同比 2,021%
            </div>
          </div>
        </div>
        <div class="py-1 px-1 flex justify-between card-footer">
          <div class="text-sn">
            总成交额：
          </div>
          <div class="text-sn">
            2,021
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script lang="ts" setup>

</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 10px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .card-main {
    padding-bottom: 12px;
    border-bottom: 1px solid #ececec;
  }

  .card-footer {
    padding-top: 12px;
  }
}
</style>
